<template>
    <div class="container">
        <div class="order_detail">
            <!-- 状态 -->
            <div class="status_main">
                <div class="status_item" v-for="(item, index) in statusArr" :key="index">
                    <div class="item_main">
                        <img class="img" src="@/assets/images/gou.svg" alt="" v-if="item.value">
                        <img class="img" src="@/assets/images/clock.svg" alt="" v-else>
                        <div class="label">{{ item.label }}</div>
                        <div class="des">{{ item.des }}</div>
                    </div>
                    <img class="line" src="@/assets/images/line.svg" alt=""
                        v-if="item.value && index < statusArr.length - 1">
                    <img class="line" src="@/assets/images/line1.svg" alt=""
                        v-else-if="!item.value && index < statusArr.length - 1">
                </div>
            </div>
            <!-- 订单信息 -->

            <el-card shadow="never" :body-style="{ padding: '20px' }">
                <template #header>
                    <el-row :gutter="10" style="justify-content: space-between;">
                        <el-col :span="1.5" style="line-height: 36px;">
                            <img class="status_icon" src="@/assets/images/excl.svg" alt="">
                            <span
                                style="color: #f56c6c;">当前订单状态：{{ selectDictLabel(order_status, orderDetail.orderState) }}</span>
                        </el-col>
                        <div class="button-main">
                            <el-button type="primary" @click="editInvoice">修改发票信息</el-button>
                            <el-button type="primary" @click="editConsignee">修改收货人信息</el-button>
                            <el-button type="primary" @click="editMaterial">修改商品信息</el-button>
                            <el-button type="primary" @click="editFeeInfo">修改费用信息</el-button>
                            <el-button type="primary" @click="sendMessage">发送站内信</el-button>
                            <el-button type="primary" @click="markOrder">关闭订单</el-button>
                            <el-button type="primary" @click="markOrder">备注订单</el-button>
                        </div>
                    </el-row>
                </template>
                <!-- card body -->

                <div class="table_box">
                    <div class="mark_info">
                        <img class="mark" src="@/assets/images/bookmarks.svg" alt="">
                        <span>基本信息</span>
                    </div>
                    <el-table :data="dataSource1" border style="border-bottom: none!important;">
                        <el-table-column align="center" prop="no" label="订单编号">{{ orderDetail.orderNo || '-'
                        }}</el-table-column>
                        <el-table-column align="center" prop="flo" label="订单流水号">-</el-table-column>
                        <el-table-column align="center" prop="phone" label="联系电话">{{ orderDetail.tel || '-'
                        }}</el-table-column>
                        <el-table-column align="center" prop="payType" label="支付方式">{{ orderDetail.payName ||
                            '-' }}</el-table-column>
                        <el-table-column align="center" prop="source" label="订单来源">{{
                            selectDictLabel(order_source, orderDetail.orderSource) }}</el-table-column>
                        <el-table-column align="center" prop="source" label="订单金额">{{ orderDetail.allTotalAmoun ||
                            '-' }}</el-table-column>
                    </el-table>
                    <el-table :data="dataSource2" border style="border-bottom: none!important;border-top:none!important;">
                        <el-table-column align="center" prop="no" label="配送方式">{{ orderDetail.peisongCompany || '-'
                        }}</el-table-column>
                        <el-table-column align="center" prop="flo" label="物流单号">{{ orderDetail.peisongNo || '-'
                        }}</el-table-column>
                        <el-table-column align="center" prop="phone" label="自动确认收货时间">-</el-table-column>
                        <el-table-column align="center" prop="payType" label="可得虚拟币">-</el-table-column>
                        <el-table-column align="center" prop="source" label="订单可得成长值">-</el-table-column>
                        <el-table-column align="center" prop="source" label="活动信息">-</el-table-column>
                    </el-table>

                </div>

                <div class="table_box">
                    <div class="mark_info">
                        <img class="mark" src="@/assets/images/bookmarks.svg" alt="">
                        <span>发票信息</span>
                    </div>
                    <el-table :data="dataSource1" border style="border-bottom: none !important;;">
                        <el-table-column align="center" prop="no" label="发票类型">-</el-table-column>
                        <el-table-column align="center" prop="flo" label="发票抬头">-</el-table-column>
                        <el-table-column align="center" prop="phone" label="发票内容">-</el-table-column>
                        <el-table-column align="center" prop="payType" label="收票人信息">-</el-table-column>
                    </el-table>
                </div>

                <div class="table_box">
                    <div class="mark_info">
                        <img class="mark" src="@/assets/images/bookmarks.svg" alt="">
                        <span>收货人信息</span>
                    </div>
                    <el-table :data="dataSource1" border style="border-bottom: none!important;;">
                        <el-table-column align="center" prop="no" label="收货人">{{ orderDetail.postReceiver ||
                            '-' }}</el-table-column>
                        <el-table-column align="center" prop="flo" label="手机号码">{{ orderDetail.postTel || '-'
                        }}</el-table-column>
                        <el-table-column align="center" prop="phone" label="邮政编码">{{ orderDetail.zipCode || '-'
                        }}</el-table-column>
                        <el-table-column align="center" prop="payType" label="收货地址">{{ orderDetail.detail || '-'
                        }}</el-table-column>
                    </el-table>
                </div>

                <div class="table_box">
                    <div class="mark_info">
                        <img class="mark" src="@/assets/images/bookmarks.svg" alt="">
                        <span>商品信息</span>
                    </div>
                    <el-table :data="orderDetail.jzgOrdersGoodsList" border style="border-bottom: none!important;;">
                        <el-table-column align="center" prop="no" label="商品图片">
                            <template #default="scope">
                                <ImagePreview :width="100" :height="100" :src="scope.row.productPic"
                                    :preview-src-list="[scope.row.productPic]" />
                            </template>
                        </el-table-column>
                        <el-table-column align="center" prop="productName" label="商品名称"></el-table-column>
                        <el-table-column align="center" prop="phone" label="价格/货号">
                            <template #default="scope">
                                <span>{{ scope.row.goodsPrice }}</span>/
                                <span>{{ scope.row.skuId }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" prop="spec" label="规格"></el-table-column>
                        <el-table-column align="center" prop="itemNum" label="数量"></el-table-column>
                        <el-table-column align="center" prop="type" label="库存">-</el-table-column>
                        <el-table-column align="center" prop="sumAmount" label="小计"></el-table-column>
                    </el-table>
                    <div class="count_total">
                        <span>合计：</span>
                        <span class="result">￥{{ getTotal() }}</span>
                    </div>
                </div>
                <div class="table_box">

                    <div class="mark_info">
                        <img class="mark" src="@/assets/images/bookmarks.svg" alt="">
                        <span>费用信息</span>
                    </div>
                    <el-table :data="dataSource1" border style="border-bottom: none!important;;">
                        <el-table-column align="center" prop="no" label="商品合计">{{ getTotal() || '-' }}</el-table-column>
                        <el-table-column align="center" prop="flo" label="运费">{{ orderDetail.allShippingFee || '-'
                        }}</el-table-column>
                        <el-table-column align="center" prop="phone" label="优惠券">{{ orderDetail.allVoucherMoney || '-'
                        }}</el-table-column>
                        <el-table-column align="center" prop="payType" label="虚拟币抵扣">{{ orderDetail.allUserMoney ||
                            '-' }}</el-table-column>
                    </el-table>
                    <el-table :data="dataSource1" border style="border-bottom: none!important;;">
                        <el-table-column align="center" prop="no" label="活动优惠">-</el-table-column>
                        <el-table-column align="center" prop="flo" label="折扣金额">{{ orderDetail.allDiscount ||
                            '-' }}</el-table-column>
                        <el-table-column align="center" prop="phone" label="订单金额">{{ orderDetail.allTotalAmount || '-'
                        }}</el-table-column>
                        <el-table-column align="center" prop="payType" label="应付款金额">{{ orderDetail.allConfirmMoney || '-'
                        }}</el-table-column>
                    </el-table>
                </div>

                <div class="table_box">
                    <div class="mark_info">
                        <img class="mark" src="@/assets/images/bookmarks.svg" alt="">
                        <span>操作信息</span>
                    </div>
                    <el-table :data="dataSource1" border style="border-bottom: none !important;;">
                        <el-table-column align="center" prop="no" label="操作人">{{ orderDetail.createName ||
                            orderDetail.createBy || '-' }}</el-table-column>
                        <el-table-column align="center" prop="no" label="操作时间">{{ orderDetail.inDate ||
                            '-' }}</el-table-column>
                        <el-table-column align="center" prop="flo" label="订单状态">{{
                            selectDictLabel(order_status, orderDetail.orderState) }}</el-table-column>
                        <el-table-column align="center" prop="phone" label="付款状态">
                            <span>{{ getPayStatus() }}</span>
                        </el-table-column>
                        <el-table-column align="center" prop="payType" label="发货状态">{{ orderDetail.mainStatusDesc || '-'
                        }}</el-table-column>
                        <el-table-column align="center" prop="source" label="备注">{{ orderDetail.memMessage || '-'
                        }}</el-table-column>
                    </el-table>
                </div>
            </el-card>

        </div>
    </div>
</template>

<script>
export default {
    name: "orderDetail",
    dicts: ["order_status,order_source"],
    data() {
        return {
            orderDetail: {},
            orderGoods: [],
            orderLog: [],
            orderLogLoading: false,
            dataSource1: [
                { no: 201707196398345, flo: '201707196398345', phone: '18000000000', payType: '支付宝', source: 'APP订单', type: '普通订单' },
            ],
            dataSource2: [
                { no: 201707196398345, flo: '201707196398345', phone: '18000000000', payType: '支付宝', source: 'APP订单', type: '普通订单' },
            ],
            statusArr: [
                { label: '提交订单', des: '2017-07-19 15:43:23', value: 1 },
                { label: '支付订单', des: '2017-07-19 15:43:23', value: 1 },
                { label: '平台发货', des: '2017-07-19 15:43:23', value: 1 },
                { label: '确认收货', des: '2017-07-19 15:43:23', value: 0 },
                { label: '完成评价', des: '2017-07-19 15:43:23', value: 0 },
            ],
            order_source: [],
            order_type: [],
            pay_way: [],
            order_status: [],
            orderLogPage: {
                page: 1,
                size: 10,
                total: 0
            }
        }
    },
    created() {
        this.getOrderDetail();
        // this.getOrderGoods();
        // this.getOrderLog();
        this.getDicts(['order_source', 'order_type', 'pay_way', 'order_status']);
    },
    methods: {
        getOrderDetail() {
            order.get(this.$route.query.id).then(res => {
                this.orderDetail = res.data;
                this.statusArr = [
                    { label: '提交订单', des: this.orderDetail.addTime || '-', value: 1 },
                    { label: '支付订单', des: this.orderDetail.payTime || '-', value: this.getPayStatus() === '已支付' ? 1 : 0 },
                    { label: '平台发货', des: this.orderDetail.shipTime || '-', value: this.orderDetail.orderState == 3 ? 1 : 0 },
                    { label: '确认收货', des: '-', value: this.orderDetail.orderState == 4 ? 1 : 0 },
                    // { label: '完成评价', des: this.orderDetail.finishTime || '-', value: 0 },
                ]
                console.log('this.statusArr :>> ', this.statusArr);
                // let index = this.statusArr.findLastIndex(item => {
                //     return item.value === 1;
                // })
                // for (let idx = 0; idx < index; idx++) {
                //     this.statusArr[idx].value = 1;
                // }
            });
        },
        getOrderGoods() {
            this.$http.get(`/order/${this.$route.query.id}/goods`).then(res => {
                this.orderGoods = res.data;
            });
        },
        getOrderLog() {
            this.orderLogLoading = true;
            this.$http.get(`/order/${this.$route.params.id}/log`, {
                params: {
                    page: this.orderLogPage.page,
                    size: this.orderLogPage.size
                }
            }).then(res => {
                this.orderLog = res.data;
                this.orderLogLoading = false;
            });
        },
        handleSizeChange(val) {
            this.orderLogPage.size = val;
            this.getOrderLog();
        },
        handleCurrentChange(val) {
            console.log('666 :>> ', 666);
            this.orderLogPage.page = val;
            this.getOrderLog();
        },
        handleAdd() {
            // Add your logic here
        },
        handleTrackShow() {
            console.log('this.$refs :>> ', this.$refs);
            this.$refs.orderTracking.show();
        },
        // 修改发票信息
        editInvoice() {
            this.$refs.editInvoiceForm.show();
        },
        // 修改收货人信息
        editConsignee() {
            this.$refs.editConsigneeForm.show();
        },
        // 修改商品信息
        editMaterial() {
            this.$refs.editMaterialInfo.show();
        },
        // 修改费用信息
        editFeeInfo() {
            this.$refs.editFeeInfo.show();
        },
        // 发送站内信
        sendMessage() {
            this.$refs.sendMessageForm.show();
        },
        // 备注订单
        markOrder() {
            this.$refs.markForm.show();
        },
        // 获取支付状态
        getPayStatus() {
            if (+this.orderDetail.allPaidAmount == 0) {
                return '未支付';
            } else if (+this.orderDetail.allPaidAmount == +this.orderDetail.allTotalAmount) {
                return '已支付';
            } else if (+this.orderDetail.allPaidAmount < +this.orderDetail.allTotalAmount) {
                return '部分付款';
            } else {
                return '-';
            }
        },
        // 获取商品总计
        getTotal() {
            let total = 0;
            (this.orderDetail.jzgOrdersGoodsList || []).forEach(item => {
                total += +item.sumAmount;
            });
            return total;
        },
        /**
         * @获取字典
         */
        async getDicts(dictType) {
            let arr = []
            if (Array.isArray(dictType)) {
                arr = dictType
            } else {
                arr.push(dictType)
            }
            for (var i = 0; i < arr.length; i++) {
                await getDicts(arr[i]).then(res => {
                    if (res.code == 200) {
                        this[arr[i]] = res.data.map(item => {
                            return {
                                label: item.dictLabel,
                                value: item.dictValue
                            }
                        })
                        console.log(arr[i], this[arr[i]]);
                    } else {
                        this.$modal.msgError(res.msg)
                    }
                });
            }
        },
    }

}
</script>

<style lang="scss" scoped>
.container {
    margin: 0 auto;
}

.order_detail {
    padding: 20px;
    max-width: 1600px;
    margin: 0 auto;
}

.status_main {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    margin: 0 auto;
    margin-bottom: 20px;
    padding: 0 100px;
}

.item_main {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 120px;
}

.img {
    width: 50px;
    height: 50px;
    margin-bottom: 8px;
}

.label {
    font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif;
    font-weight: 700;
    color: #666666;
    margin-bottom: 4px;
}

.des {
    font-size: 12px;
    color: #999;
}

.status_item {
    position: relative;
    display: flex;
    align-content: center;
}

.line {
    width: calc(100% - 38px);
    position: absolute;
    top: 25px;
    left: 79px;
    height: 5px;
}

.table_box {
    margin-bottom: 40px;
}

.mark {
    width: 18px;
    margin-right: 10px;
}

.mark_info {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.count_total {
    background-color: #f5f7fa;
    padding: 10px 20px;
    text-align: right;
    border: 1px solid #ebeef5;
    border-top: none;

    .result {
        font-size: 18px;
        color: #f56c6c;
        font-weight: bold;
    }
}

.status_icon {
    vertical-align: middle;
    margin-right: 10px;
    width: 16px;
    margin-top: -3px;
}

.button-main {
    float: right;
}

.productPic {
    object-fit: cover;
}</style>
<style type="text/css">.order_detail .el-card__header {
    background-color: #f5f7fa;
}</style>